<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        padding: 0;
        margin: 0;
        list-style: none;
        border: 0;
      }
      .all {
        width: 500px;
        height: 200px;
        padding: 7px;
        border: 1px solid #ccc;
        margin: 100px auto;
        position: relative;
      }
      .screen {
        width: 500px;
        height: 200px;
        overflow: hidden;
        position: relative;
      }
      .screen li {
        width: 500px;
        height: 200px;
        overflow: hidden;
        float: left;
      }
      .screen ul {
        position: absolute;
        left: 0;
        top: 0px;
        width: 3000px;
      }
      .all ol {
        position: absolute;
        right: 10px;
        bottom: 10px;
        line-height: 20px;
        text-align: center;
      }
      .all ol li {
        float: left;
        width: 20px;
        height: 20px;
        background: #fff;
        border: 1px solid #ccc;
        border-radius: 50%;
        margin-left: 10px;
        cursor: pointer;
      }
      .all ol li.current {
        background: yellow;
      }
      /*#arr {display: none;}*/
      #arr span {
        width: 40px;
        height: 40px;
        position: absolute;
        left: 5px;
        top: 50%;
        margin-top: -20px;
        background: #000;
        cursor: pointer;
        line-height: 40px;
        text-align: center;
        font-weight: bold;
        font-family: "黑体";
        font-size: 30px;
        color: #fff;
        opacity: 0.3;
        border: 1px solid #fff;
      }
      #arr #right {
        right: 5px;
        left: auto;
      }
    </style>
  </head>
  <body>
    <div class="all" id="all">
      <div class="screen" id="screen">
        <ul id="ul">
          <li><img src="./images/1.webp" width="500" height="200" /></li>
          <li><img src="./images/2.webp" width="500" height="200" /></li>
          <li><img src="./images/3.webp" width="500" height="200" /></li>
          <li><img src="./images/4.webp" width="500" height="200" /></li>
          <li><img src="./images/5.webp" width="500" height="200" /></li>
        </ul>
        <ol></ol>
        <div id="arr">
          <span id="left"><</span>
          <span id="right">></span>
        </div>
      </div>
    </div>

    <script>
      window.onload = function () {
        var ul = document.querySelector("ul"); // 图片容器
        var ol = document.querySelector("ol"); // 圆点容器
        var pointIndex = 0; // 圆点索引，默认显示第一个
        var picIndex = 0; // 图片索引，默认显示第一个
        var prev = document.getElementById("left");
        var next = document.getElementById("right");
        var screen = document.getElementById("screen"); // 最外层容器
        var newLi = ul.children[0].cloneNode(true); // 把第一个li标签深拷贝一份

        // 根据图片的数量生成指定的圆点
        for (var i = 0; i < ul.children.length; i++) {
          var point = document.createElement("li"); // 创建圆点标签
          point.innerHTML = i + 1; // 给圆点设置图片序号
          ol.appendChild(point); // 添加到圆点容器中
        }

        // 克隆第一张图片，放到ul后面
        ul.appendChild(newLi);

        // 页面加载时执行一次，结合定时器实现自动切换图片
        var timer = setInterval(autoplay, 1000);

        light(); // 页面加载时调用一次

        // 上一张
        prev.onclick = function () {
          console.log("prev");
          pointIndex--; // 圆点索引自减
          picIndex--; // 图片索引自减

          // 图片边界处理
          if (pointIndex < 0) {
            ul.style.left = -(ul.children.length - 1 - 1) * 500 + "px"; // 修改图片为倒数第二张
            pointIndex = ul.children.length - 1 - 1; // 圆点索引为倒数第二个
            picIndex = ul.children.length - 1 - 1; // 图片索引为倒数第二个
          }

          // 圆点边界处理
          pointIndex = pointIndex < 0 ? ol.children.length - 1 : pointIndex;
          // 图片切换处理
          animate(ul, { left: -500 * picIndex });
          light(); // 更新圆点高亮索引
        };
        // 下一张
        next.onclick = autoplay;

        // 鼠标移出移入事件
        screen.onmouseenter = function () {
          clearInterval(timer); // 移入时清除定时器
        };
        screen.onmouseleave = function () {
          // 移出时最好也要移出定时器
          clearInterval(timer);
          // 重新设置定时器
          timer = setInterval(autoplay, 1000);
        };

        // 切换图片方法
        function autoplay() {
          console.log("next");
          pointIndex++;
          picIndex++;
          // 图片边界处理
          if (picIndex > ul.children.length - 1) {
            picIndex = 0; // 图片索引重置为0
            pointIndex = 0; // 圆点索引重置为0
            ul.style.left = 0; // 显示第一张图片
          }

          // pointIndex = pointIndex > ol.children.length - 1 ? 0 : pointIndex
          pointIndex > ol.children.length - 1 && (pointIndex = 0);
          light();

          // 图片切换处理
          animate(ul, { left: -500 * picIndex });
        }

        // 圆点高亮方法
        function light() {
          // 排他思想
          for (var i = 0; i < ol.children.length; i++) {
            ol.children[i].className = ""; // 取消所有圆点的激活样式
          }
          // 默认第一个圆点高亮显示
          ol.children[pointIndex].className = "current";
        }

        // 返回指定dom节点的attr样式值
        function getStyle(dom, attr) {
          if (window.getComputedStyle) {
            // 是否有getComputedStyle方法
            //非IE低版
            return window.getComputedStyle(dom, null)[attr];
          } else {
            //IE低版
            return dom.currentStyle[attr];
          }
        }
        // 封装一个缓动的动画函数，需要时调用即可
        function animate(dom, json, callback) {
          /*
              dom:要运动的容器节点
              json:要运动的样式名
              callback:运动完成的回调函数
          */
          clearInterval(dom.timer); //要用定时器，先清定时器
          //要运动的定时器
          dom.timer = setInterval(function () {
            var flag = true;
            //json有几个属性，就要运动几次
            for (var attr in json) {
              //获取当前位置
              var current = parseInt(getStyle(dom, attr));
              // 计算速度
              var speed =
                json[attr] - current > 0
                  ? Math.ceil((json[attr] - current) / 10)
                  : Math.floor((json[attr] - current) / 10);
              //计算下一个位置
              var next = current + speed;
              //定位元素
              dom.style[attr] = next + "px";
              //判断是否达到目标
              if (next != json[attr]) {
                flag = false;
              }
            }
            if (flag) {
              // 动画执行完毕了
              clearInterval(dom.timer);
              callback && callback(); // 为了防止不传造成当成函数调用报错，所以做了短路处理
            }
          }, 20); // 每20毫秒
        }
      };
    </script>
  </body>
</html>
